<!-- paypal - 添加、编辑 -->
<template>
	<Modal
	    width="550"
	    class-name="vertical-center-modal"
	    class="pop-paypal"
	    :mask-closable="false"
	    @on-cancel="close"
	    v-model="payalShow"
	    :title="paypalValidate.id ? $t('setting.settingEditPaypal') : $t('setting.settingAddPaypal')"
		>
	  <div class="pop-address-content">
	    <Form v-if="payalShow" ref="paypalValidateRef" :model="paypalValidate" label-position="top" :rules="paypalRuleValidate">
				<!-- paypal账号 -->
	      <FormItem :label="$t('setting.settingEmailPaypal')" prop="payPalAccount">
	        <Input v-model="paypalValidate.payPalAccount" :placeholder="$t('user.pleaseEnter')"></Input>
	      </FormItem>
				<div class="col-888 f-12 lin-18">
					{{$t('setting.settingSubPaypal')}}
				</div>
				<div v-if="!paypalValidate.id" class="mt-8">
					<Checkbox v-model="confirmCheck">
					  <span class="text">{{$t('setting.settingCheckPaypal')}}</span>
					</Checkbox>
				</div>
	    </Form>
	  </div>
	  <div slot="footer" class="flex a-c j-sb">
			<div>
				<Checkbox v-model="paypalValidate.isDefault">
				  <span class="text">{{$t('setting.settingEditDefault')}}</span>
				</Checkbox>
			</div>
			<div class="flex a-c j-e">
				<Button v-if="paypalValidate.id" class="pop-delete flex a-c j-c" @click="paypalDeleteConfirm">{{$t('user.delete')}}</Button>
				<Button class="pop-cancel flex a-c j-c" @click="close">{{$t('user.cancel')}}</Button>
				<Button v-if="!paypalValidate.id" class="pop-confirm flex a-c j-c" :loading="loading" @click="paypalAddConfirm" type="primary">{{$t('user.confirm')}}</Button>
				<Button v-else class="pop-confirm flex a-c j-c" :loading="loading" @click="paypalEditConfirm" type="primary">{{$t('user.edit')}}</Button>
			</div>
	  </div>
	</Modal>
</template>

<script>
	import { userCardAdd, userCardEdit,deleteCard } from "@/api/card";
	
	export default{
		data(){
			return{
				payalShow:false,
				paypalValidate: {
				  payPalAccount:'',//paypal账号
				  isDefault: false, // 是否默认
					payeeType:2
				},
				paypalRuleValidate:{
					payPalAccount:[
						{ required: true, message: this.$t('user.pleaseEnter'), trigger: 'blur' }
					]
				},
				loading: false,
				confirmCheck:false,
			}
		},
		methods:{
			open(obj = {}){
				if(obj && obj.id){//编辑
					this.paypalValidate = obj;
				}
				this.paypalValidate.payeeType = 2;
				this.payalShow = true;
			},
			close(){
				this.payalShow = false;
				this.paypalValidate = {
				  payPalAccount:'',//paypal账号
					isDefault: false, // 是否默认
					payeeType:2
				}
				this.confirmCheck = false;
				this.$refs.paypalValidateRef.resetFields();
			},
			//新增
			paypalAddConfirm(){
				this.$refs.paypalValidateRef.validate((valid)=>{
					if(valid){
						if(!this.paypalValidate.id && !this.confirmCheck){//要确认信息无误
							this.$Message.warning(this.$t('setting.paypalAddTip'));
							return;
						}
						this.loading = true;
						userCardAdd(this.paypalValidate).then((res)=>{
						  this.$Message.success(this.$t('user.addSuccessfully'));
						  this.commonFun();
						}).catch(()=>{
						  this.loading = false;
						})
					}
				})
			},
			//编辑
			paypalEditConfirm(){
				this.$refs.paypalValidateRef.validate((valid)=>{
					if(valid){
						this.loading = true;
						userCardEdit(this.paypalValidate).then((res)=>{
						  this.$Message.success(this.$t('user.changeSuccessfully'));
						  this.commonFun();
						}).catch(()=>{
						  this.loading = false;
						})
					}
				})
			},
			// 删除地址
			paypalDeleteConfirm() {
				this.loading = true;
			  deleteCard(this.paypalValidate.id).then((res)=>{
			    this.$Message.success(this.$t('user.deletedSuccessfully'));
			    this.commonFun();
			  })
			},
			commonFun(){
				this.loading = false;
				this.close();
				this.$emit('editSuccess');
			}
		}
	}
</script>

<style lang="less" scoped>
	.pop-paypal {
		/deep/ .ivu-modal-footer{
			padding:24px;
		}
		/deep/ .ivu-modal-body{
			padding:24px;
		}
		.pop-cancel{
			height:48px;
			min-width:80px;
			padding:0 12px;
			border:1px solid #888;
			border-radius: 2px 2px 2px 2px;
			margin:0;
			color:#222222;
			font-size:16px;
			line-height: 16px;
		}
		.pop-delete{
			height:48px;
			min-width:80px;
			padding:0 12px;
			border:1px solid #888;
			border-radius: 2px 2px 2px 2px;
			margin:0;
			color:#222222;
			font-size:16px;
			line-height: 16px;
			margin-right:16px;
		}
		.pop-confirm{
			height:48px;
			min-width:80px;
			padding:0 12px;
			border:none;
			margin:0;
			margin-left:16px;
			color:#fff;
			font-size:16px;
			line-height: 16px;
			border-radius: 2px 2px 2px 2px;
		}
	  .pop-address-content {
	    .flex-content {
	      .input {
	
	      }
	      .select {
	        .option-content {
	          display: flex;
	          align-items: center;
	          .logo {
	            display: inline-block;
	            width: 30px;
	            margin-right: 4px;
	          }
	        }
	      }
	      .country-wrap {
	        background-color: #fff;
	        border-radius: 4px;
	        border: 1px solid #dcdee2;
	        padding: 0 8px;
	      }
	    }
	  }
	}
</style>